<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
    <style>
        table{
            /* 设置单元格边框合并 */
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <!-- table标签  border表示表格边框宽度 cellspacing单元格和单元格之间的距离
     bgcolor背景颜色  background背景图片
     align 设置表格水平对齐方式 left center right
     -->
     <table bgcolor="cyan" align="center" width="300px" border="1" cellspacing="0">
        <!-- 一行用tr标签表示  一个td标签表示一个单元格 
         tr*3>td*3 tr*3表示生成tr三个
         tr>td表示在tr里面生成td
         -->
         <!-- caption 表格标题标签 -->
        <caption>个人信息</caption>
        <tr bgcolor="red">
            <!-- th thead 表头标签 自带加粗居中 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>terry</td>
            <td>12</td>
            <td>male</td>
        </tr>
        <tr>
            <td>larry</td>
            <td>22</td>
            <td>female</td>
        </tr>
     </table>
     <!-- 表格跨行和跨列合并 
      colspan 跨列合并
      rowspan 跨行合并
     -->
      <table width="300px" border="1">
        <tr>
            <td rowspan="3">11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td rowspan="3" colspan="2">15</td>
            <!-- <td>16</td> -->
        </tr>
        <tr>
            <!-- <td>21</td> -->
            <td colspan="2">22</td>
            <!-- <td>23</td> -->
            <td>24</td>
            <!-- <td>25</td> -->
            <!-- <td>26</td> -->
        </tr>
        <tr>
            <!-- <td>31</td> -->
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <!-- <td>35</td> -->
            <!-- <td>36</td> -->
        </tr>
      </table>
</body>
</html>